<template>
	<div>
		<el-form :model="ruleForm" ref="ruleForm" :rules="rules" :label-position="labelPosition" label-width="100px" class="demo-ruleForm">
			<el-row class="container">
				<h3>授权管理</h3>
				<el-col :span="12">
					<el-form-item label="授权名称" prop="accreditName">
						<el-input placeholder="请输入内容" v-model="ruleForm.accreditName" style="width:300px" disabled></el-input>
					</el-form-item>
					<el-form-item label="授权内容">
                        <el-upload
                            class="upload-poster"                               
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :show-file-list="false"
                            :auto-upload="false">
                            <img v-if="this.ruleForm.contentImg" :src="this.ruleForm.contentImg" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    	jpg、png、gif格式，60x60像素，不超过2MB
                	</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="授权期限" prop="jyName">
						<el-date-picker
							value-format="yyyy/MM/dd"
							format="yyyy/MM/dd"
							style="width:300px"
							v-model="value1"
							type="daterange"
							disabled
							range-separator="至"
							:start-placeholder="this.ruleForm.accreditTime"
							:end-placeholder="this.ruleForm.accreditExpire">
						</el-date-picker>
					</el-form-item>
					
				</el-col>
			</el-row>
			<el-row class="container" style="margin-top:20px;">
				<h3>授权企业</h3>
				<div style="margin:20px;">
					<div v-for="(item,index) in this.ruleForm.list" :key="index">
						<span>{{item.companyName}}</span>
					</div>
				</div>
			</el-row>
		</el-form>
	</div>
</template>

<script>
	import { empower_selectId } from "@/request/supervisionCenterApi.js"
	export default{
		data(){
			return{
				ruleForm: [],
				labelPosition: 'left',
				value1: '',
				rules: {},
				contentImg: '',
				id:'',
			}
		},
		mounted(){
			this.id = this.$route.query.id
			this.init()
		},
		methods:{
			init() {
				let data = {
					id: this.id
				}
				empower_selectId(data).then((res) =>{
					this.ruleForm = res.data
					this.ruleForm.contentImg = this.$store.state.pathimg + res.data.contentImg
				})
			}
		}
	}
</script>

<style scoped>
	.avatar-uploader .el-upload {
	   border: 1px dashed #d9d9d9;
	   border-radius: 6px;
	   cursor: pointer;
	   position: relative;
	   width:180px;
	   overflow: hidden;
	 }
	 
	 .avatar-uploader .el-upload:hover {
	   border-color: #409EFF;
	 }
	 .el-upload--text{
	     width:180px;
	 }
	 .avatar-uploader-icon {
	   font-size: 28px;
	   color: #8c939d;
	   width: 178px;
	   height: 178px;
	   line-height: 178px;
	   text-align: center;
	 }
	 .avatar {
	   width: 178px;
	   height: 178px;
	   display: block;
	 }
</style>